<%--
  Created by IntelliJ IDEA.
  User: eventhorizonsky
  Date: 2021/9/3
  Time: 13:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>

    <title>模板</title>
    <meta name="viewport" content="width=device-width">

    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <%--    MDUI的css包--%>
    <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
            integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw"
            crossorigin="anonymous"
    />
    <style>
        body{
            overflow: scroll;
            max-height: 100%;
        }
        /*设置搜索框的样式*/
        .textout{
            width: 50%;
            height: 70%;
            border-radius: 10px;
            background-color: #f0ffff91;
        }
        .textinside{
            height:70%;
            padding-top: 5px;
            width: 80%;
        }
        .searchtext{
            background: none;
            outline:none;
            border:none;
            padding: 10px;
            width: 100%;
        }
    </style>
</head>
<%--设置主色调为蓝色，设置应用栏不被覆盖--%>
<body class="mdui-theme-primary-indigo mdui-appbar-with-toolbar mdui-theme-accent-pink mdui-loaded" id="bd">
<%--应用栏--%>
<div class="mdui-appbar mdui-appbar-fixed">
    <div class="mdui-toolbar mdui-color-theme">
        <a href="javascript:;"  mdui-drawer="{target: '#left-drawer'}" class="mdui-btn mdui-btn-icon"><i class="mdui-icon material-icons">menu</i></a>
        <a href="index.jsp" class="mdui-typo-headline">MDUI</a>
        <div class="mdui-toolbar-spacer"></div>
        <%--搜索框--%>
        <div class="textout">
            <form action="SearchResult.jsp">
                <div class="mdui-textfield mdui-textfield-floating-label mdui-center textinside">
                    <input class="searchtext" type="text" name="searchword" placeholder="搜索关键词">
                </div>
            </form>
        </div>
        <div class="mdui-toolbar-spacer"></div>
        <%-- 主题切换按钮--%>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon change-theme-dark" id="changetheme"><i class="mdui-icon material-icons">&#xe3a9;</i></a>
        <%--如果已登录则显示头像，未登录则点击可以弹出登录窗口--%>
        <%if(request.getSession().getAttribute("user") != null) {%>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-menu="{target: '#usermenu',covered:false,posision:'bottom'}"><img style="width: 30px;height: 30px;padding: 9px" src="https://www.ezsky.xyz/wp-content/uploads/2020/07/blackhole.png"></a>
        <ul class="mdui-menu"  id="usermenu">
            <li class="mdui-menu-item">
                <a href="javascript:;" class="mdui-ripple">
                    <i class=" mdui-menu-item-icon mdui-icon material-icons">&#xe7fd;</i>个人主页
                </a>
            </li>
            <li class="mdui-menu-item">
                <a href="logoff" class="mdui-ripple">
                    <i class="mdui-menu-item-icon mdui-icon material-icons">&#xe890;</i>登出
                </a>
            </li>
        </ul>
        <%}else {%>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-dialog="{target: '#login'}"><i class="mdui-icon material-icons">&#xe853;</i></a>
        <%}%>

    </div>
    <div id="schedule"></div>
</div>
<%--登录框--%>
<div class="mdui-dialog" id="login">

    <button class="mdui-btn mdui-btn-icon" style="position: absolute;"  mdui-dialog-close><i class="mdui-icon material-icons">close</i></button>
    <div class="mdui-dialog-title" style="background-color: #3f51b5;margin-bottom: 24px;padding: 146px 40px 28px;color: #fff;">登录</div>

    <form id="loginform" method="post">
        <div class="mdui-textfield mdui-textfield-floating-label mdui-center" style="width: 80%">
            <label class="mdui-textfield-label">邮箱</label>
            <input class="mdui-textfield-input" type="email" name="email" id="email" required/>
            <div class="mdui-textfield-error">邮箱不能为空</div>
        </div>
        <div class="mdui-textfield mdui-textfield-floating-label mdui-center"  style="width: 80%" >
            <label class="mdui-textfield-label">密码</label>
            <input class="mdui-textfield-input" type="password" name="password" id="password" required/>
            <div class="mdui-textfield-error">密码不能为空</div>
        </div>

        <div style="margin: 5% 0;width: 80%"class="mdui-center">
            <button class="mdui-btn mdui-ripple more-option" type="button" mdui-menu="{target: '#mc-login-menu', position: 'top', covered: true}">更多<i class="mdui-icon material-icons mdui-text-color-theme-icon">arrow_drop_down</i></button>
            <ul class="mdui-menu" id="mc-login-menu" style="transform-origin: 0px 100%; position: fixed;">
                <li class="mdui-menu-item"><a class="mdui-ripple"  mdui-dialog-close mdui-dialog="{target: '#forget'}">忘记密码</a></li>
                <li class="mdui-menu-item"><a class="mdui-ripple" mdui-dialog-close mdui-dialog="{target: '#registered'}" >创建新账号</a></li>
            </ul>
            <button type="button" onclick="login()" class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple" style="float: right" >登录</button>
        </div>

    </form>
</div>
<%--注册框--%>
<div class="mdui-dialog" id="registered">
    <button class="mdui-btn mdui-btn-icon" style="position: absolute;"  mdui-dialog-close><i class="mdui-icon material-icons">close</i></button>
    <div class="mdui-dialog-title" style="background-color: #4caf50;margin-bottom: 24px;padding: 146px 40px 28px;color: #fff;">注册</div>
    <form method="post">

        <div class="mdui-textfield mdui-textfield-floating-label mdui-center" style="width: 80%">
            <label class="mdui-textfield-label">邮箱</label>
            <input class="mdui-textfield-input" type="email" name="uemail" id="uemail"/>
        </div>
<div class="mdui-row mdui-center"   style="width: 83%">
        <div class="mdui-textfield mdui-textfield-floating-label mdui-col-xs-8 mdui-center">
            <label class="mdui-textfield-label">验证码</label>
            <input class="mdui-textfield-input" type="password" name="vcode" id="vcode"/>
        </div>
    <div class="mdui-col-xs-4 mdui-valign" style="top: 32px">
    <button onclick="" class="mdui-btn mdui-ripple mdui-center" type="button">获取验证码</button>
    </div>
    </div>
        <div style="margin: 5% 0;width: 80%"class="mdui-center">
            <button class="mdui-btn mdui-ripple more-option" type="button" mdui-menu="{target: '#mc-registered-menu', position: 'top', covered: true}">更多<i class="mdui-icon material-icons mdui-text-color-theme-icon">arrow_drop_down</i></button>
            <ul class="mdui-menu" id="mc-registered-menu" style="transform-origin: 0px 100%; position: fixed;">
                <li class="mdui-menu-item"><a class="mdui-ripple"mdui-dialog-close mdui-dialog="{target: '#login'}">登录</a></li>
                <li class="mdui-menu-item"><a class="mdui-ripple"mdui-dialog-close mdui-dialog="{target: '#forget'}">忘记密码</a></li>

            </ul>
            <button onclick="register()" type="button" class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple" style="float: right">注册</button>
        </div>

    </form>
</div>
<%--忘记密码--%>
<div class="mdui-dialog" id="forget">
    <button class="mdui-btn mdui-btn-icon" style="position: absolute;"  mdui-dialog-close><i class="mdui-icon material-icons">close</i></button>
    <div class="mdui-dialog-title" style="background-color: #ff5722;margin-bottom: 24px;padding: 146px 40px 28px;color: #fff;">忘记密码</div>
    <form>
        <div class="mdui-textfield mdui-textfield-floating-label mdui-center" style="width: 80%">
            <label class="mdui-textfield-label">邮箱</label>
            <input class="mdui-textfield-input" type="email"/>
        </div>
        <div class="mdui-textfield mdui-textfield-floating-label mdui-center"  style="width: 80%">
            <label class="mdui-textfield-label">验证码</label>
            <input class="mdui-textfield-input" type="password"/>

        </div>
        <div style="margin: 5% 0;width: 80%"class="mdui-center">
            <button class="mdui-btn mdui-ripple more-option" type="button" mdui-menu="{target: '#mc-forget-menu', position: 'top', covered: true}">更多<i class="mdui-icon material-icons mdui-text-color-theme-icon">arrow_drop_down</i></button>
            <ul class="mdui-menu" id="mc-forget-menu" style="transform-origin: 0px 100%; position: fixed;">
                <li class="mdui-menu-item"><a class="mdui-ripple"mdui-dialog-close mdui-dialog="{target: '#login'}">登录</a></li>
                <li class="mdui-menu-item"><a class="mdui-ripple"mdui-dialog-close mdui-dialog="{target: '#registered'}">创建新账号</a></li>

            </ul>
            <button class="mdui-btn mdui-btn-raised mdui-btn-dense mdui-color-theme-accent mdui-ripple" style="float: right">下一步</button>
        </div>

    </form>
</div>
<%--抽屉栏--%>
<div class="mdui-drawer mdui-drawer-close mdui-shadow-1" id="left-drawer">
    <ul class="mdui-list">
        <a href="index.jsp">
            <li class="mdui-list-item mdui-ripple">
                <i class="mdui-icon material-icons mdui-list-item-icon">&#xe88a;</i>
                <div class="mdui-list-item-content">首页</div>
            </li>
        </a>
        <a href="https://www.ezsky.xyz/991.html">
            <li class="mdui-list-item mdui-ripple">
                <i class="mdui-icon material-icons mdui-list-item-icon">&#xe02f;</i>
                <div class="mdui-list-item-content">使用教程</div>
            </li>
        </a>
    </ul>
</div>
<%--在这中间写内容--%>



<%--在这中间写内容--%>
<%--  MDUI的js包--%>
<script
        src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"
        integrity="sha384-gCMZcshYKOGRX9r6wbDrvF+TcCCswSHFucUzUPwka+Gr+uHgjlYvkABr95TCOz3A"
        crossorigin="anonymous"
></script>

<script type="text/javascript">
    // 登录
    var $ = mdui.$;
    function login(){
        $("#schedule").html("<div class=\"mdui-progress\">\n" +
            "  <div class=\"mdui-progress-indeterminate\"></div>\n" +
            "</div>");
        var email = $("#email").val();
        var password = $("#password").val();
        if(isEmpty(email)) {
            mdui.snackbar({
                message: '邮箱不可为空',
                position: 'top'
            })
            return;
        }
        //  判断密码是否为空
        if(isEmpty(password)) {
            //  如果密码为空,提示用户(span标签赋值),并且return html()
            mdui.snackbar({
                message: '密码不可为空',
                position: 'top'
            })
            return;
        }
        $.ajax({
            type: "post",//请求方式
            url: "login",//地址，就是json文件的请求路径
            dataType: "json",//数据类型可以为 text xml json  script  jsonp
            data:{email:email,password:password},
            success: function(data){//返回的参数就是 action里面所有的有get和set方法的参数
                if(data.code=='1'){
                    $("#schedule").html("")
                    location.href="index.jsp"
                }else{
                    $("#schedule").html("")
                    mdui.snackbar({
                        message: data.msg,
                        position: 'top'
                    })
                }
            }})}
    function isEmpty(str){
        if(str == null || str.trim() == ""){  //str.trim()取出前后空格
            return true;
        }
        return false;
    }
    // 注册
    var inst = new mdui.Dialog('#registeredstep2');
    function register(){
        $("#schedule").html("<div class=\"mdui-progress\">\n" +
            "  <div class=\"mdui-progress-indeterminate\"></div>\n" +
            "</div>");
        var uemail = $("#uemail").val();
        var vcode = $("#vcode").val();
        if(isEmpty(vcode)) {
            mdui.snackbar({
                message: '验证码不可为空',
                position: 'top'
            })
            return;
        }
        if(isEmpty(uemail)) {
            mdui.snackbar({
                message: '邮箱不可为空',
                position: 'top'
            })
            return;
        }
        $.ajax({
            type: "post",//请求方式
            url: "register",//地址，就是json文件的请求路径
            dataType: "json",//数据类型可以为 text xml json  script  jsonp
            data:{uemail:uemail,vcode:vcode},
            success: function(data){//返回的参数就是 action里面所有的有get和set方法的参数
                if(data.code=='1'){
                    $("#schedule").html("")
                    location.href="index.jsp"
                    inst.open();
                }else{
                    $("#schedule").html("")
                    mdui.snackbar({
                        message: data.msg,
                        position: 'top'
                    })
                }
            }})
    }
    // 切换主题
    var changetheme=document.getElementById("changetheme");
    var divEle= document.getElementById("bd");
    // 加载主题
    loadtheme();
    //从cookies读取主题
    function loadtheme(){
        if(document.cookie.indexOf("theme=")!=-1){
            var themevalue=document.cookie.split("theme=")[1].split("=")[0];
            var i=document.cookie.split("theme=")[1].split("=")[1];
            var i2=document.cookie.split("theme=")[1].split("=")[2].split(";")[0];
            // alert(themevalue+">"+i+"<"+i2);
            if(themevalue==null||i==null||i2==null){
                divEle.className='mdui-theme-primary-indigo mdui-appbar-with-toolbar mdui-theme-accent-pink mdui-loaded';//改变样式
                changetheme.innerHTML="<i class='mdui-icon material-icons'>&#xe3a9;</i>"
                changetheme.className="mdui-btn mdui-btn-icon change-theme-dark"
            }else{
                divEle.className=themevalue;
                changetheme.innerHTML="<i class='mdui-icon material-icons'>"+i+"</i>";
                changetheme.className=i2;
            }}
    }
    // 点击切换按钮切换主题
    changetheme.addEventListener('click', function() {
        var theme=changetheme.className;
        divEle= document.getElementById("bd");
        if(theme=="mdui-btn mdui-btn-icon change-theme-dark"){

            divEle.className='mdui-theme-layout-dark mdui-appbar-with-toolbar mdui-loaded';//改变样式
            this.className="mdui-btn mdui-btn-icon change-theme-light";
            this.innerHTML="<i class='mdui-icon material-icons'>&#xe1ac;</i>"
            document.cookie="theme=mdui-theme-layout-dark mdui-appbar-with-toolbar mdui-loaded=&#xe1ac=mdui-btn mdui-btn-icon change-theme-light";
        }if(theme=="mdui-btn mdui-btn-icon change-theme-light"){
            divEle= document.getElementById("bd");
            divEle.className='mdui-theme-primary-indigo mdui-appbar-with-toolbar mdui-theme-accent-pink mdui-loaded';//改变样式
            this.className="mdui-btn mdui-btn-icon change-theme-dark";
            this.innerHTML="<i class='mdui-icon material-icons'>&#xe3a9;</i>"
            document.cookie="theme=mdui-theme-primary-indigo mdui-appbar-with-toolbar mdui-theme-accent-pink mdui-loaded=&#xe3a9=mdui-btn mdui-btn-icon change-theme-dark";
        }
    });

</script>
</body>
</html>
